{extend name="index/base" /}
{block name="content"}
<blockquote class="layui-elem-quote fhui-admin-main_hd">
    <h2>权限列表</h2>
</blockquote>

<div class="y-role">
    <!--工具栏-->
    <div id="floatHead" class="toolbar-wrap">
        <div class="toolbar">
            <div class="box-wrap">
                <a class="menu-btn"></a>
                <div class="l-list">
                    <a class="layui-btn layui-btn-sm do-action" data-type="doAdd" href="javascript:void(0);"
                       lay-event="edit" id="doAdd"><i class="fa fa-plus"></i>新增</a>
                    <a class="layui-btn layui-btn-sm do-action" onclick="window.location.reload()"><i
                            class="fa fa-refresh fa-spin"></i>刷新</a>
                </div>
            </div>
        </div>
    </div>
    <!--/工具栏-->
    <!--文字列表-->
    <div class="fhui-admin-table-container">
        <table id="table1" lay-filter="table1"></table>
    </div>
</div>

<!--添加用户权限-->
<div class="layui-hide" id="add_rules">
    <form class="layui-form" lay-filter="add_rules"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">选择上级</label>
            <div class="layui-input-inline">
                <select name="pid" lay-filter="pid" id="selectpid"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" placeholder="权限名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="URL" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <select name="type" >
                    <option value="1">1</option>
                </select>
            </div>
        </div> -->
        <div class="layui-form-item">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-inline">
                <input type="text" name="css" placeholder="图标" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-inline">
                <input type="radio" name="show" value="1" title="显示" checked>
                <input type="radio" name="show" value="0" title="不显示">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-inline">
                <input type="radio" name="status" value="1" title="启用" checked>
                <input type="radio" name="status" value="0" title="不启用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a class="layui-btn" lay-submit lay-filter="add_submit">立即提交</a>
            </div>
        </div>
    </form>
</div>
<!--添加用户权限结束-->

<!--编辑用户权限-->
<div class="layui-hide" id="edit_rules">
    <form class="layui-form" lay-filter="edit_form">
        <input type="hidden" name="id" value="">
        <div class="layui-form-item">
            <label class="layui-form-label">选择上级</label>
            <div class="layui-input-inline">
                <select name="pid" lay-filter="pid" id="selecteditpid"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" placeholder="权限名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="URL" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!-- <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <select name="type" lay-filter="type">
                    <option value="1">1</option>
                </select>
            </div>
        </div> -->
        <div class="layui-form-item">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-inline">
                <input type="text" name="css" placeholder="图标" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否显示</label>
            <div class="layui-input-inline">
                <input type="radio" name="show" value="1" title="显示" checked>
                <input type="radio" name="show" value="0" title="不显示">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-inline">
                <input type="radio" name="status" value="1" title="启用" checked>
                <input type="radio" name="status" value="0" title="不启用">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a class="layui-btn" lay-submit lay-filter="edit_submit">立即提交</a>
            </div>
        </div>
    </form>
</div>
<!--编辑用户权限结束-->

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="is_show">
    {{#  if(d.show == 1){ }}
    <a>显示</a>
    {{# }else{  }}
    <a>隐藏</a>
    {{#  } }}
</script>

<script type="text/html" id="is_status">
    {{#  if(d.status == 1){ }}
    <a>启用</a>
    {{# }else{  }}
    <a>禁用</a>
    {{#  } }}
</script>

{/block}
{block name="js"}

<script type="text/javascript">
    layui.use(['table', 'jquery', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        var token = layui.sessionData('token').token;
        var inittable = table.render({
            elem: '#table1'
            , height: '700'
            , url: '{:url("rules")}?token=' + token //数据接口
            , page: false //开启分页
            , limit: 20
            , cols: [[ //表头
                {field: 'id', title: 'ID', width: 100, fixed: 'left'}
                , {field: 'title', title: '权限名称'}
                , {field: 'name', title: 'url'}
                // ,{field: 'type', title: '类型', width:80}
                , {
                    field: 'css', title: '图标', templet: function (d) {
                        return '<i class="' + d.css + '"></i>';
                    }
                }
                , {field: 'show', title: '是否显示', toolbar: '#is_show'}
                , {field: 'sort', title: '排序'}
                , {field: 'status', title: '是否启用', toolbar: '#is_status'}
                , {fixed: 'right', 'title': '操作', align: 'center', toolbar: '#barDemo'}
            ]]
        });
        //处理编辑的请求
        table.on('tool(table1)', function (obj) {
            var data = obj.data; //获得当前行数据
            var str = "{:url('editRule',array('id'=>'Pid'))}";
            str1 = str.replace("Pid", data.id);
            if (obj.event === 'edit') {
                $.get("{:url('selectRules')}", {'token': token}, function (res) {
                    var arr = res.data;
                    var str = fill_option(arr);
                    $('#selecteditpid').html(str);
                    // form.render('select','edit_form');
                });
                $.get("{:url('getRulesInfo')}", {'id': data.id, 'token': token}, function (res) {
                    $('#edit_rules input[name=show][value=' + res.data.show + ']').prop('checked', true);
                    form.val("edit_form", res.data);
                    form.render('select', 'edit_form');
                });
                layer.open({
                    type: 1,
                    title: '编辑权限',
                    area: ['500px', '550px'],
                    shade: 0.6,
                    scrollbar: true,
                    content: $("#edit_rules"),
                    success: function () {
                        $("#edit_rules").removeClass("layui-hide");
                    },
                    cancel: function () {
                        $("#edit_rules").addClass("layui-hide");
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('您确定要删除该权限吗？', function (index) {
                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('delRule')}", {id: data.id, token: token}, function (res) {
                        layer.close(loading);
                        if (res.code === 0) {
                            layer.msg(res.msg, {time: 1000, icon: 1});
                            obj.del();
                        } else {
                            layer.msg('操作失败！', {time: 1000, icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        $('#reload_btn').click(function () {
            var keywords = $('#keywords').val();
            inittable.reload({
                where: {
                    keywords: keywords
                },
                page: {
                    curr: 1
                }
            })
        });
        //添加权限展示弹窗
        $("#doAdd").click(function () {
            form.val("add_rules", {
                'pid': '',
                'title': '',
                'name': '',
                'css': '',
                'show': '',
                'sort': '',
                'status': ''
            });
            $.get("{:url('selectRules')}", {token: token}, function (res) {
                var arr = res.data;
                var str = fill_option(arr);
                $('#selectpid').html(str);
                form.render('select');
            });
            var open1 = layer.open({
                type: 1,
                title: '添加权限',
                area: ['500px', '550px'],
                shade: 0.6,
                scrollbar: true,
                content: $("#add_rules"),
                success: function () {
                    $("#add_rules").removeClass('layui-hide');
                },
                cancel: function () {
                    $("#add_rules").addClass('layui-hide');
                }
            });
        })
        //处理添加权限
        var add = form.on('submit(add_submit)', function (data) {
            //console.log(data.field);
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('addRule')}?token=" + token, data.field, function (res) {
                layer.close(loading);
                if (res.code == 0) {
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        layer.closeAll();
                        inittable.reload();
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
            });
        });
        //处理编辑权限
        var edit = form.on('submit(edit_submit)', function (data) {
            console.log(data.field); //当前容器的全部表单字段，名值对形式：{name: value}
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('editRule')}?token=" + token, data.field, function (res) {
                layer.close(loading);
                if (res.code == 0) {
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        layer.closeAll();
                        inittable.reload();
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
            });
        });
    });
</script>

{/block}